<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户信息表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
</head>

<body>
    <div>
        <button id="btn-add" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</button>
        <button id="btn-del" class="btn bg-primary">删除</button>
        <button id="btn-edit" class="btn bg-primary">编辑</button>
        <button id="btn-search" class="btn bg-primary">查询</button>

        <label><input id="sId" class="form-control" placeholder="按工号查询"></label>
        <label><input id="sName" class="form-control" placeholder="按姓名查询"></label>
    </div>

    <table class="table table-striped table-hover">       
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody id="myTb">
            <tr>
                <td> <input type="checkbox" class="subCheck"></td>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>1234</td>
                <td>24</td>
                <td>1998-8-1</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="subCheck"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>125</td>
                <td>20</td>
                <td>1920-8-1</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="subCheck"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>18</td>
                <td>1995-8-1</td>
            </tr>
        </tbody>
    </table>    

    <!-- 声明定义模态框组件，实现新增跟修改 --> 
    <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > 
        <!-- 窗口声明 --> 
        <div class="modal-dialog"> 
            <!-- 内容声明 --> 
            <div class="modal-content"> 
                <!-- 1.框的标题 --> 
                <div class="modal-header"> 
                    <button class="close" data-dismiss="modal">
                            <span>&times;</span> </button> 
                    <h4 class="modal-title">编辑用户信息</h4> 
                </div> 
                <!-- 2.框内信息 --> 
                <div class="modal-body"> 
                    <form class="form-horizontal" id="myForm" role="form">                   
                        <div class="form-group">
                            <label for="ename" class="col-sm-2 control-label">姓名:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="ename" type="text" placeholder="请输入用户姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gender" class="col-sm-2 control-label">性别:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="gender" type="text" placeholder="请输入用户性别">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pwd" class="col-sm-2 control-label">密码:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="pwd" type="text" placeholder="请输入用户密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="age" type="text" placeholder="请输入用户年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birth" class="col-sm-2 control-label">出生日期:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="birth" type="text" placeholder="请输入用户出生日期">
                            </div>
                        </div>
                        <input type="hidden" id="hiddenInput" vv="">
                    </form>
                </div> 
                <!-- 3.框的按钮 --> 
                <div class="modal-footer"> 
                    <button class="btn btn-info" id="btn-save">保存</button> 
                    <button class="btn btn-default" data-dismiss="modal">取消</button> 
                </div> 
            </div>
        </div> 
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function() {
            function formReset(){
                // 重置表单
                $('#myForm').get(0).reset();
            }
            // 新增按钮点击
            $('#btn-add').click(function () {
                formReset();
                // 新增之前 清空vv
                $('#hiddenInput').prop("vv","");
                
            })

            // 删除
            $('#btn-del').click(function(){
                var delArr = [];
                $('.subCheck').each(function(i,obj){
                    if(obj.checked == true){
                        delArr.push(i);
                    }
                })
                if(delArr.length<1){
                    alert("请至少选择一条删除数据!");
                }
                else{
                    delArr.forEach(function(obj,i){
                    var j=delArr[i]-i;
                    $('#myTb tr:eq('+j+')').remove();
                    })
                }
            })
                
            //编辑按钮点击
            $('#btn-edit').click(function () {
                var selectIndex;
                var selectCount=0;
                $('.subCheck').each(function(i,j){
                    if(j.checked == true){
                        selectCount++;
                        selectIndex=i;
                    }
                })
                if(selectCount!==1){
                    alert("请选择一条数据进行修改!")
                }else{
                    // 拿到选中tr的值
                    var mytr=$("#myTb tr:eq("+selectIndex+")");
                    $('#ename').val(mytr.find("td:eq(2)").text());
                    $('#gender').val(mytr.find("td:eq(3)").text());
                    $('#pwd').val(mytr.find("td:eq(4)").text());
                    $('#age').val(mytr.find("td:eq(5)").text());
                    $('#birth').val(mytr.find("td:eq(6)").text());
                    // 为隐藏的input vv 属性赋值，附上当前选中table行的索引
                    $('#hiddenInput').prop("vv",selectIndex);
                    $('#myModal').modal('show');
                }
            })
            
            //查询
            $("#btn-search").click(function(){
                var sid = $("input[id='sId']").val();
                var sname = $("input[id='sName']").val();
                if(sid==""&&sname==""){
                    alert("请输入一个搜索条件！");
                }else if(sid !==""&&sname!==""){
                    alert("一次只能输入一个搜索条件！");
                }else if(sid !==""&&sname==""){
                    //按工号查询
                    $("#myTb tr").each(function(i){
                        // alert("这是第"+(i+1)+"行内容");
                        $(this).children("td:eq(1)").each(function(i){
                            var tp = $(this).text();
                            if(sid == tp){
                                alert("您要查询的用户是："+$(this).parent().text());
                            }
                        });
                    });
                }else if(sid==""&&sname!==""){
                    //按姓名查询
                    $("#myTb tr").each(function(i){
                        // alert("这是第"+(i+1)+"行内容");
                        $(this).children("td:eq(2)").each(function(i){
                            var tp = $(this).text();
                            if(sname == tp){
                                alert("您要查询的用户是："+$(this).parent().text());
                            }                
                        });
                    });
                }
            });

            // 提交按钮点击
            $('#btn-save').click(function () {
                var ename = $('#ename').val();
                var gender = $('#gender').val();
                var pwd = $('#pwd').val();
                var age = $('#age').val();
                var birth = $('#birth').val();
                if(ename==""||gender==""||pwd==""||age==""||birth==""){
                    alert("请检查是否有未填项!");
                }else{
                    var vvValue = $('#hiddenInput').prop("vv");
                    if(vvValue==""||vvValue==undefined||vvValue==null){
                        var ename = $('#ename').val();
                        var gender = $('#gender').val();
                        var pwd = $('#pwd').val();
                        var age = $('#age').val();
                        var birth = $('#birth').val();
                        // 工号
                        var gonghao = $('.subCheck').length + 1001;
                        // 向table中插入数据
                        var trString = `<tr> <td>
                        <input type="checkbox" class="subCheck">
                        </td>
                        <td>${gonghao}</td>
                        <td>${ename}</td>
                        <td>${gender}</td>
                        <td>${pwd}</td>
                        <td>${age}</td>
                        <td>${birth}</td></tr>`;
                        $('#myTb').append(trString);
                        $('#myModal').modal('hide');
                         
                    }
                    else{
                        // 拿到当前要修改的tr
                        var selectTr = $("#myTb tr:eq("+vvValue+")");
                        // 修改数据
                        selectTr.find("td:eq(2)").text($('#ename').val());
                        selectTr.find("td:eq(3)").text($('#gender').val());
                        selectTr.find("td:eq(4)").text($('#pwd').val());
                        selectTr.find("td:eq(5)").text($('#age').val());
                        selectTr.find("td:eq(6)").text($('#birth').val());
                        $('#myModal').modal('hide');
                    }
                }
            })

        })
    </script>
  
    
</body>
</html>